 <script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { Todo, TodoFilter } from '../types/todo';
import TodoItem from './TodoItem.vue';

const todos = ref<Todo[]>([]);
const newTodoText = ref('');
const filter = ref<TodoFilter>('all');

// 从本地存储加载待办事项
const loadTodos = () => {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    try {
      // 解析存储的JSON并转换日期字符串为Date对象
      const parsedTodos = JSON.parse(savedTodos);
      todos.value = parsedTodos.map((todo: any) => ({
        ...todo,
        createdAt: new Date(todo.createdAt)
      }));
    } catch (e) {
      console.error('加载待办事项失败:', e);
      todos.value = [];
    }
  }
};

// 保存待办事项到本地存储
const saveTodos = () => {
  localStorage.setItem('todos', JSON.stringify(todos.value));
};

// 监听待办事项变化并保存
watch(todos, saveTodos, { deep: true });

// 添加新待办事项
const addTodo = () => {
  const text = newTodoText.value.trim();
  if (text) {
    todos.value.push({
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date()
    });
    newTodoText.value = '';
  }
};

// 切换待办事项完成状态
const toggleComplete = (id: number) => {
  const todo = todos.value.find(todo => todo.id === id);
  if (todo) {
    todo.completed = !todo.completed;
  }
};

// 删除待办事项
const deleteTodo = (id: number) => {
  const index = todos.value.findIndex(todo => todo.id === id);
  if (index !== -1) {
    todos.value.splice(index, 1);
  }
};

// 根据过滤条件显示待办事项
const filteredTodos = computed(() => {
  switch (filter.value) {
    case 'active':
      return todos.value.filter(todo => !todo.completed);
    case 'completed':
      return todos.value.filter(todo => todo.completed);
    default:
      return todos.value;
  }
});

// 清除所有已完成的待办事项
const clearCompleted = () => {
  todos.value = todos.value.filter(todo => !todo.completed);
};

// 计算统计信息
const activeCount = computed(() => {
  return todos.value.filter(todo => !todo.completed).length;
});

const hasCompleted = computed(() => {
  return todos.value.some(todo => todo.completed);
});

// 组件挂载时加载待办事项
onMounted(() => {
  loadTodos();
});
</script>

<template>
  <div class="todo-container">
    <h1>待办事项列表</h1>
    
    <!-- 添加新待办事项 -->
    <div class="add-todo">
      <input 
        v-model="newTodoText" 
        @keyup.enter="addTodo" 
        placeholder="添加新待办事项..."
        class="todo-input"
      />
      <button @click="addTodo" class="add-btn">添加</button>
    </div>
    
    <!-- 待办事项列表 -->
    <div v-if="todos.length > 0" class="todo-list">
      <TodoItem 
        v-for="todo in filteredTodos" 
        :key="todo.id" 
        :todo="todo"
        @toggle-complete="toggleComplete"
        @delete-todo="deleteTodo"
      />
    </div>
    <div v-else class="empty-state">
      没有待办事项，请添加一些任务！
    </div>
    
    <!-- 底部工具栏 -->
    <div v-if="todos.length > 0" class="todo-footer">
      <span class="todo-count">
        {{ activeCount }} 项未完成
      </span>
      
      <div class="filters">
        <button 
          @click="filter = 'all'" 
          :class="{ active: filter === 'all' }"
          class="filter-btn"
        >
          全部
        </button>
        <button 
          @click="filter = 'active'" 
          :class="{ active: filter === 'active' }"
          class="filter-btn"
        >
          未完成
        </button>
        <button 
          @click="filter = 'completed'" 
          :class="{ active: filter === 'completed' }"
          class="filter-btn"
        >
          已完成
        </button>
      </div>
      
      <button 
        v-if="hasCompleted" 
        @click="clearCompleted"
        class="clear-btn"
      >
        清除已完成
      </button>
    </div>
  </div>
</template>

<style scoped>
.todo-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

h1 {
  text-align: center;
  margin-bottom: 24px;
  color: #42b883;
}

.add-todo {
  display: flex;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px 0 0 8px;
  background-color: #2c2c2c;
  color: #fff;
  font-size: 16px;
}

.add-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 0 8px 8px 0;
  background-color: #42b883;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-btn:hover {
  background-color: #3aa876;
}

.todo-list {
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 20px;
  color: #888;
  font-style: italic;
}

.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #3a3a3a;
  font-size: 14px;
}

.todo-count {
  color: #aaa;
}

.filters {
  display: flex;
  gap: 8px;
}

.filter-btn {
  background: none;
  border: 1px solid transparent;
  color: #aaa;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: #42b883;
  color: #42b883;
}

.filter-btn.active {
  border-color: #42b883;
  color: #42b883;
  font-weight: bold;
}

.clear-btn {
  background: none;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  transition: color 0.2s ease;
}

.clear-btn:hover {
  color: #ff4757;
  text-decoration: underline;
}

@media (prefers-color-scheme: light) {
  .todo-container {
    background-color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  .todo-input {
    background-color: #f5f5f5;
    color: #333;
  }
  
  .todo-footer {
    border-top-color: #eaeaea;
  }
}
</style>